<template>
    <div id="chatrs">
    </div>
</template>

<script>
import * as echarts from "echarts";
import home from "@/api/home";
export default {
  destroyed() {
      clearTimeout(timer)
  },
  data() {
    return {
      map:null,
      dataList:null,
      numList:null
    }
  },
  methods: {
    myPieChart() {  
      console.log(this.dataList)
      var chartDom = document.getElementById('chatrs');
      var myChart = echarts.init(chartDom);        
      var option;
        option = {
          xAxis: {
            type: 'category',
            data:this.dataList || ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data:this.numList || [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        };
        myChart.setOption(option);
    },
    showData(){
          home.showData().then(res=>{
          this.map = res.data.data.map
          this.dataList = res.data.data.map.date_calculatedList
          this.numList = res.data.data.map.numDataList     
        })
        var timer = setTimeout(() => {
          console.log(this.dataList)
          this.myPieChart()
        },100)
       
    }
  },
  mounted() {
    this.showData()
  }

}
</script>

<style scoped>
#chatrs{
  height: 370px;
  width: 500px;
  margin-top: 15px;
  background: white;
  border-radius: 3px;
  box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 50%);
}
</style>